<template>
  <a-modal :title="title" :visible="visible" @ok="handleOk" :confirmLoading="confirmLoading" @cancel="handleCancel">
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="类名" prop="clazz">
        <a-input v-model="form.clazz" />
      </a-form-model-item>
      <a-form-model-item label="字段" prop="field">
        <a-input v-model="form.field" />
      </a-form-model-item>

      <a-form-model-item label="CODE" prop="code">
        <a-input v-model="form.code" />
      </a-form-model-item>

      <a-form-model-item label="展示" prop="label">
        <a-input v-model="form.label" />
      </a-form-model-item>

      <a-form-model-item label="备注" prop="remark">
        <a-textarea v-model="form.remark" :rows="2" />
      </a-form-model-item>

      <a-form-model-item label="排序" prop="seq">
        <a-input-number v-model="form.seq" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { add, edit } from '@/api/dict'

const defaultForm = {
  id: undefined,
  clazz: null,
  field: null,
  code: null,
  label: null,
  remark: null,
  seq: null
}

export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      // title: '',
      visible: false,
      confirmLoading: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      roles: [],
      form: { ...defaultForm },
      rules: {
        clazz: [{ required: true, message: 'Please input clazz', trigger: 'blur' }],
        field: [{ required: true, message: 'Please input field', trigger: 'blur' }],
        code: [{ required: true, message: 'Please input code', trigger: 'blur' }],
        label: [{ required: true, message: 'Please input label', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title: function () {
      return this.isAdd ? '新建' : '修改'
    }
  },
  methods: {
    handleCancel(e) {
      this.resetForm()
    },
    handleOk() {
      this.$refs['form'].validate(this.validate)
    },
    async validate(valid) {
      if (valid) {
        this.confirmLoading = true
        if (this.isAdd) {
          this.doAdd()
        } else {
          this.doEdit()
        }
      }
    },
    async doAdd() {
      try {
        const res = await add(this.form)
        this.$message.success({ content: '添加成功!', duration: 2 })
        this.resetForm()
        this.$emit('refreshTable')
      } catch (err) {
        this.confirmLoading = false
        console.error(err.message)
      }
    },
    async doEdit() {
      try {
        const res = await edit(this.form)
        this.$message.success({ content: '修改成功!', duration: 2 })
        this.resetForm()
        this.$emit('refreshTable')
      } catch (err) {
        this.confirmLoading = false
        console.error(err.message)
      }
    },
    resetForm() {
      this.visible = false
      this.confirmLoading = false
      this.$refs['form'].resetFields()
      this.form = { ...defaultForm }
    }
  }
}
</script>
